<template>
    <div class="OrdersList">
        <el-card class="OrdersList-header">
            <div class="search-input">
                <p class="search-input-name">订单号: </p>
                <el-input class="search-input-tool" v-model="code" placeholder="请输入订单号" />
            </div>
            <div class="search-select">
                <p class="search-select-name">订单状态: </p>
                <el-select class="search-input-tool" v-model="status" clearable placeholder="请选择所属菜单">
                    <el-option
                        v-for="item in orderOptions"
                        :key="item.value"
                        :label="item.name"
                        :value="item.value"
                    />
                </el-select>
            </div>
            <el-button 
                type="primary" 
                class="opera-search"
                :icon="Search"
                @click="SearchOpera" 
            >搜索</el-button>
            <el-button 
                class="opera-search"
                :icon="Refresh"
                @click="RefreshOpera" 
            >重置</el-button>
        </el-card>
        <el-card class="OrdersList-section">
            <div class="OrdersList-content">
                <TableModules :data="orderData">
                    <template #tableContent>
                        <el-table-column prop="code"  align="center" label="订单号"/>
                        <el-table-column prop="price"  align="center" label="商品">
                            <template #default="scope">
                               <p v-for="(i,idx) in scope.row.list" :key="idx">{{ i.produce_name }}</p>
                            </template>
                        </el-table-column>
                        <el-table-column prop="price"  align="center" label="价格"/>
                        <el-table-column prop="status"  align="center" label="订单状态">
                            <template #default="scope">
                               <p>{{ orderStatus[scope.row.status] }}</p>
                            </template>
                        </el-table-column>
                        <el-table-column prop="time"  align="center" label="下单时间"/>
                        <el-table-column prop="total"  align="center" label="数量"/>
                        <el-table-column type="expand">
                            <template #default="props">
                                <div class="expand-content">
                                    <p class="expand-content-item">
                                        <span>署名：</span>
                                        <span>{{ props.row.site.name }}</span>
                                    </p>
                                    <p class="expand-content-item">
                                        <span>联系方式：</span>
                                        <span>{{ props.row.site.link }}</span>
                                    </p>
                                    <p class="expand-content-item">
                                        <span>发货方式：</span>
                                        <span>{{ harvestType[props.row.site.type] }}</span>
                                    </p>
                                    <p class="expand-content-item">
                                        <span>发货地址：</span>
                                        <span>{{ props.row.site.address }}</span>
                                    </p>
                                    <p class="expand-content-item">
                                        <span>备注：</span>
                                        <span>{{ props.row.site.remark }}</span>
                                    </p>
                                </div>
                            </template>
                        </el-table-column>
                        <!-- <el-table-column fixed="right" align="center" label="操 作">
                            <template #default="scope">
                                <el-button type="primary" @click="EditTag(scope.row)">修 改</el-button>
                                <el-button type="danger" @click="DeletTag(scope.row)">删 除</el-button>
                            </template>
                        </el-table-column> -->
                    </template>
                </TableModules>
            </div>
            <div class="OrdersList-footer">
                <PaginationModules
                    :pageTotal="pageTotal"
                    @currentClick="CurrentClick" 
                ></PaginationModules>
            </div>
        </el-card>
        <el-dialog
            v-model="tagDialogVisible"
            :title="operaTypeName"
            width="400px"
            class="tagDialog"
            align-center
        >
            <div class="tagDialog-section">
                <div class="tagDialog-section-chunk">
                    <p class="chunk-input-name">标签名: </p>
                    <el-input v-model="dialogTagValue" class="chunk-input-value" placeholder="请输入菜单名" />
                </div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="tagDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="TagDialogConfig">确 定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
    
<script setup>
import { onMounted, ref } from 'vue';
import TableModules from '@/components/TableModules.vue';
import PaginationModules from '@/components/PaginationModules.vue';
import { GetAllOrderReq } from '../utils/api/index.js';
import { Search,Refresh } from '@element-plus/icons-vue';
const code = ref(''); // 标签名
const status = ref('');
const orderData = ref([]); // 标签数据
const tagDialogVisible = ref(false); // 标签弹框开关
const operaTypeName = ref(''); // 操作类型名
const dialogTagValue = ref(''); // 弹框标签值
const dialogConfigFlag = ref(false); // 弹框确定开关
const pageNum = ref(1);
const pageSize = ref(10);
const pageTotal = ref(0); // 总条数
const orderOptions = [
    {
        name: "未支付",
        value: '1'
    },
    {
        name: "已支付",
        value: '2'
    },
    {
        name: "已关闭",
        value: '4'
    }
]
const harvestType = {
    "1": "QQ",
    "2": "微信",
    "3": "QQ邮箱",
}
const orderStatus = {
    "1": "未支付",
    "2": "已支付",
    "3": "未支付",
    "4": "已关闭"
}
const SearchOpera = () => {
    GetAllOrder(code.value, status.value);
}
const RefreshOpera = () => {
    code.value = '';
    status.value = '';
    GetAllOrder();
}
const GetAllOrder = async (code = undefined,status = undefined) => {
    let orderRes = await GetAllOrderReq({
        code,
        status,
        pageNum: pageNum.value,
        pageSize: pageSize.value
    })
    if(orderRes.code == 200) {
        orderData.value = orderRes.data;
        pageTotal.value = orderRes.data.total;
    }
};
onMounted(() => {
    GetAllOrder()
})
// 分页前进/后退
const CurrentClick = (pageVal) => {
    pageNum.value = pageVal;
    GetAllOrder(code.value, status.value);
}
</script>
    
<style scoped lang="scss">
.OrdersList{
    width: 100%;
    height: 100%;
    &-header{
        height: 85px;
        :deep(.el-card__body){
            display: flex;
            align-items: center;
            .search-input, .search-select{
                display: flex;
                align-items: center;
                // font-size: 18px;
                &:nth-child(n + 2) {
                    margin: 0 0 0 20px;
                }
                &-tool{
                    width: 200px;
                    margin: 0 0 0 20px;
                }
            }
            .opera-search{
                margin: 0 0 0 20px;
            }
            .opera-createMenu{
                margin: 0 0 0 20px;
            }
        }
    }
    &-section{
        width: 100%;
        height: calc(100% - 85px - 10px) ;
        display: flex;
        flex-direction: column;
        margin: 10px 0 0;
        :deep(.el-card__body){
            height: 100%;
        }
        .OrdersList-content{
            height: calc(100% - 50px) ;
            display: flex;
            .expand-content{
                margin: 0 0 0 20px;
            }
        }
        .OrdersList-footer{
            height: 50px;
            display: flex;
            align-items: flex-end;
            justify-content: flex-end;
        }
    }
    .tagDialog{
        &-section{
            display: flex;
            flex-direction: column;
            align-items: center;
            &-chunk{
                display: flex;
                align-items: center;
                // font-size: 18px;
                &:last-child{
                    margin: 20px 0 0;
                }
                .chunk-input-name{
                    width: 100px;
                    text-align: center;
                }
                .chunk-input-value{
                    width: 200px;
                    margin: 0 0 0 10px;
                }
            }
        }
    }
}
</style>